<template>
  <div class="home">
    <home-head></home-head>
    <div class="homeContent">
      <el-form class="homeContentMain">
        <el-form-item label="头像:" label-width="80px">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="#"
            :on-change='beforeUpload'
            :show-file-list="false"
            :auto-upload="false">
              <img v-if="userInfoModel.avatar" :src="userInfoModel.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称:" label-width="80px">
          <el-input v-model="userInfoModel.nickname"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" label-width="80px">
          <el-input v-model="userInfoModel.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" label-width="80px">
          <el-input v-model="userInfoModel.mobile"></el-input>
        </el-form-item>
        <el-form-item label="所在城市:" label-width="80px" class="InfoCitys">
          <el-select v-model="userInfoModel.province" placeholder="省份" @change="getCityOfType(2)">
            <el-option v-for="(item, key) in province" :key="key" :value="item.id" :label="item.name"></el-option>
          </el-select>
          <el-select v-model="userInfoModel.city" placeholder="城市" @change="getCityOfType(3)">
            <el-option v-for="(item, key) in citys" :key="key" :value="item.id" :label="item.name"></el-option>
          </el-select>
          <el-select v-model="userInfoModel.district" placeholder="区县">
            <el-option v-for="(item, key) in district" :key="key" :value="item.id" :label="item.name"></el-option>
          </el-select>
         </el-form-item>
        <el-form-item label-width="80px">
          <el-button @click="saveUserInfo()">保存信息</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import homeHead from '~/components/layout/homeHead.vue'
import { clone } from '~/utils'
import { mapMutations, mapGetters, mapActions } from "vuex";
export default {
    layout: 'current',
    watchQuery: ['page'],
    validate({ params, store }) {
        let userInfo = store.state.userInfo;
        if (!userInfo) {
          store.commit('SET_ERROR_INFO', '请先登陆后操作');
          return false;
        }
        return true;
    },
    data() {
      return {
        userInfoModel: {
          users_id: '',
          nickname: '',
          avatar: '',
          email: '',
          mobile: '',
          province: '',
          city: '',
          district: ''
       }
      }
    },
    computed: {
      ...mapGetters(['userInfo', 'province', 'citys', 'district', 'fileDomin']),
      avatarName() {
        let avatarArr = this.userInfoModel.avatar.split('/');
        if (avatarArr.length) {
          return avatarArr[avatarArr.length - 1];
        }
      }
    },
    components: {
      homeHead
    },
    methods: {
      ...mapActions({
        uploadFile: "uploadFile",
        getCitys: 'getCitys',
        userUpdateInfo: 'userUpdateInfo'
      }),
      async beforeUpload(file) {
        let formdata = new FormData();
        formdata.append('file', file.raw, file.name);
        let result = await this.uploadFile(formdata);
        this.userInfoModel.avatar = result.data.url;
      },
      async getCityOfType(type) {
        let params = {
          levelType: type || 1
        };
        switch (type) {
          case 2:
            params.parentId = this.userInfoModel.province;
            break;
          case 3:
            params.parentId = this.userInfoModel.city;
            break;
          default:
            break;
        }
        await this.getCitys(params);
      },
      async backfull() {
        let userInfoModel = clone(this.userInfo);
        this.userInfoModel = userInfoModel;
        if (userInfoModel.city) {
          await this.getCityOfType(2);
        }
        if (userInfoModel.district) {
          await this.getCityOfType(3);
        }
      },
      async saveUserInfo() {
        let data = await this.userUpdateInfo({
          ...this.userInfoModel,
          avatar: this.avatarName
        });
        if (data.code === 0) {
          this.$notify({
              message: '修改成功!',
              type: 'success',
              offset: 50,
              duration: 3000
          });
          window.location.reload();
        } else {
          this.$notify({
            message: data.msg,
            type: 'warning',
            offset: 50,
            duration: 3000
          });
        }
      }
    },
    created() {
      this.getCityOfType();
      this.backfull();
    },
    mounted() {
      this.$watch('userInfoModel.province', () => {
        this.userInfoModel.city = '';
        this.userInfoModel.district = '';
      })
      this.$watch('userInfoModel.city', () => {
        this.userInfoModel.district = '';
      })
    }
}
</script>
